import 'package:Bible/page/directory.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:Bible/global.dart';
import 'package:flutter/material.dart';
import 'package:Bible/http/api.dart';

class ListPage extends StatefulWidget {
  ListPage({Key key, this.index}) : super(key: key);
  final index;
  @override
  _ListPageState createState() => _ListPageState();
}

class _ListPageState extends State<ListPage> {
  var _items = [];
  @override
  void initState() {
    var _index = widget.index;
    EasyLoading.show();
    getBibleList().then((res) {
      EasyLoading.dismiss();
      setState(() {
        _items = _index == 1 ? res['part1'] : res['part2'];
      });
    });
    super.initState();
  }

  List<Widget> renderList() {
    List<Widget> list = [];
    for (var i = 0; i < _items.length; i++) {
      var item = _items[i];
      list.add(
        InkWell(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => DirectoryPage(
                  id: item['id'].toString(),
                ),
              ),
            );
          },
          child: Container(
            width: MediaQuery.of(context).size.width / 2,
            padding: EdgeInsets.fromLTRB(15, 5, 10, 5),
            decoration: BoxDecoration(
              border: Border(
                bottom: BorderSide(
                  width: 1,
                  color: Global.primaryColor.withOpacity(0.1),
                ),
              ),
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  item['name'],
                  style: TextStyle(
                    color: Global.fontColor,
                    fontFamily: 'fangzhengkai',
                    fontSize: 18,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                SizedBox(width: 5),
                Text(
                  item['enName'],
                  style: TextStyle(
                    color: Global.fontSecondColor,
                    fontFamily: 'fangzhengkai',
                    fontSize: 13,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return _items.length == 0
        ? Scaffold(
            body: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              color: Global.backgroundColor,
              child: Center(
                  child: CircularProgressIndicator(
                      backgroundColor: Global.primaryColor)),
            ),
          )
        : Scaffold(
            body: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              decoration: BoxDecoration(
                color: Global.backgroundColor,
              ),
              child: Column(
                children: [
                  Container(
                    padding: EdgeInsets.fromLTRB(0, Global.paddingTop, 0, 10),
                    decoration: BoxDecoration(
                      color: Global.backgroundColor,
                      boxShadow: [
                        BoxShadow(
                          color: Colors.black.withOpacity(0.2),
                          offset: Offset(0, 2),
                          blurRadius: 2,
                          spreadRadius: 2,
                        )
                      ],
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        IconButton(
                          icon: Icon(
                            Icons.chevron_left,
                            color: Global.primaryColor,
                            size: 27,
                          ),
                          tooltip: '返回首页',
                          onPressed: () {
                            Navigator.of(context).pop();
                          },
                        ),
                        Expanded(
                          child: Center(
                            child: Text(
                              widget.index == 1 ? '旧约' : '新约',
                              style: TextStyle(
                                fontFamily: 'fangzhengkai',
                                fontWeight: FontWeight.w700,
                                fontSize: 18,
                                color: Global.fontColor,
                              ),
                            ),
                          ),
                        ),
                        SizedBox(width: 53),
                      ],
                    ),
                  ),
                  Expanded(
                    child: SingleChildScrollView(
                      child: Wrap(
                        children: renderList(),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );
  }
}
